<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./bootstrap-3.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="./jquery-3.6.0.js"></script>
    <script src="./bootstrap-3.4.1/dist/js/bootstrap.min.js"></script>
</head>
<body>
    <input type="text"/>
    <br>
    <select>
        <option>请选择城市</option>
        <option>北京</option>
        <option>上海</option>
    </select>
    <br>
    <textarea cols="30" rows="10"></textarea>
    <hr>
    <input type="checkbox" name="hobby"/>唱歌
    <input type="checkbox" name="hobby"/>跳舞
    <br><hr>
   <input type="radio"/>男
   <input type="radio"/>女
    <button>按钮</button>
    <input type="button" value="按钮"/>
    <!-- <input type="text" class="form-control"/> -->
    <div class="row">
        <div class="col-md-3">
            <input type="text" class="form-control"/><br>
            <input type="text" class="form-control input-lg"/><br>
            <input type="text" class="form-control input-sm"/><br>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-md-3">
            <select class="form-control">
                <option>请选择城市</option>
                <option>北京</option>
                <option>上海</option>
            </select>
            <br>
            <select class="form-control" multiple="multiple">
                <option>请选择城市</option>
                <option>北京</option>
                <option>上海</option>
            </select>
            <br>
            <textarea cols="30" rows="10"  class="form-control"></textarea>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
           <div class="checkbox">
               <label> <input type="checkbox" name="hobby"/>唱歌</label>
           </div>
           <div class="checkbox">
               <label> <input type="checkbox" name="hobby"/>跳舞</label>
           </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
           <label class="checkbox-inline">
            <input type="checkbox" name="hobby"/>唱歌
           </label>
           <label class="checkbox-inline">
            <input type="checkbox" name="hobby"/>跳舞
           </label>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
           <div class="radio">
               <label> <input type="radio" name="sex"/>男</label>
           </div>
           <div class="radio">
               <label> <input type="radio" name="sex"/>女</label>
           </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
           <label class="radio-inline">
            <input type="radio" name="sex"/>男
           </label>
           <label class="radio-inline">
            <input type="radio" name="sex"/>女
           </label>
        </div>
    </div>
    <button class="btn">按钮</button>
    <button class="btn btn-danger">按钮</button>
    <button class="btn btn-success">按钮</button>
    <button class="btn btn-warning">按钮</button>
    <button class="btn btn-primary">按钮</button>
    <button class="btn btn-default">按钮</button>
    <button class="btn btn-info">按钮</button>
    <button class="btn btn-link">按钮</button>
    <br>
    <a href="#" class="btn btn-primary btn-sm">a标签</a>
    <span class="btn btn-danger btn-lg">span标签</span>
    <div class="btn btn-default btn-xs">div标签</div>
    <br>
    <button class="btn btn-danger" onclick="alert('你好')" disabled>按钮，真的不能点击</button>
    <button class="btn btn-primary disabled" onclick="alert('你好')">按钮，实际可以点击</button>
</body>
</html>